<template>
  <view class="tab_live">
    <u-sticky
      offset-top="0"
      bg-color="#f5f5f5"
      h5-nav-height="0"
      class="u-sticky"
    >
      <view class="header_search_warp">
        <header-search-input @clickGetMajor="clickGetMajor" :disabled="true" />
      </view>
    </u-sticky>

    <view class="swiper_content">
      <image src="@/static/images/swiper1.png"></image>
    </view>
    <view class="title_name" v-if="todayList.length > 0">今日直播</view>
    <view class="content">
      <navigator
        :url="'/pages/course-detail/course-detail?id=' + item.id"
        class="content_item"
        v-for="item in todayList"
        :key="item.id"
      >
        <view class="item_image">
          <view class="image_title">{{ item.startTime }}</view>
          <image :src="item.coverUrl" />
        </view>
        <view class="item_text_warp">
          <view class="item_title">{{ item.name }}（{{ item.subhead }}）</view>
          <view class="item_user">
            <view class="item_left">
              <view class="item_image_warp">
                <image :src="item.teacherIcoUrl" />
              </view>
              <view class="item_user_teacher_name">{{ item.teacherName }}</view>
            </view>
            <view class="item_right">免费</view>
          </view>
        </view>
      </navigator>
    </view>
    <view class="tab_warp">
      <u-sticky :offset-top="navHeight" z-index="99">
        <u-tabs
          :list="tab"
          :is-scroll="false"
          :current="activeIndex"
          @change="tabItemChange"
        ></u-tabs>
      </u-sticky>
    </view>
    <view class="live_card_warp">
      <live-card v-for="item in comTodayList" :key="item.id" :item="item" />
    </view>
    <load-more :status="status" />
  </view>
</template>

<script>
import { coursePackageList } from "@/api/course";
import { mapState } from "vuex";
export default {
  data() {
    return {
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "实在没有了",
      },
      tab: [
        {
          id: 0,
          name: "直播预告",
        },
        {
          id: 1,
          name: "直播回放",
        },
      ],
      activeIndex: 0,
      pageSize: 20,
      pageNumList: [1, 1],
      todayList: [], // 今日直播
      otherList: [
        {
          list: [],
          total: 0,
        },
        {
          list: [],
          total: 0,
        },
      ], // 0预告  1回放
      toRpx: 2,
    };
  },
  onLoad() {
    // 获取今日直播
    this.getCourseList(0, 1);
    // 获取直播预告
    this.getCourseList(1, this.pageNum, "change");
    this.toRpx = 750 / this.SystemInfo.windowWidth;
  },
  // 页面滚动到底部
  onReachBottom() {
    const activeIndex = this.activeIndex;
    const activeObj = this.otherList[activeIndex];
    const pageNum = this.pageNum;
    if (this.pageSize * (pageNum - 1) > activeObj.total) {
      if (!this.status !== "nomore") this.status = "nomore";
    } else {
      this.status = "loading";
      this.$u.throttle(this.getCourseList(activeIndex + 1, pageNum), 500, true);
    }
  },
  methods: {
    getCourseList(liveType, pageNum, type = "load") {
      coursePackageList({
        liveType,
        pageSize: this.pageSize,
        pageNum,
        playType: 2, // 直播课程
      }).then((res) => {
        if (type !== "load") {
          this.todayList = res.list;
        } else {
          let list = [...this.comTodayList, ...(res.list || [])];
          this.comTodayList = list;
          this.otherList[this.activeIndex].total = res.total;
          this.pageNum = this.pageNum + 1;
          this.status = res.list.length < this.pageSize ? "nomore" : "loadmore";
        }
      });
    },
    clickGetMajor(options) {
      console.log(options);
    },
    tabItemChange(e) {
      this.activeIndex = e;
      this.getCourseList(e + 1, this.pageNum);
    },
  },
  watch: {},
  computed: {
    ...mapState("equipment", ["SystemInfo"]),

    comTodayList: {
      get() {
        return this.otherList[this.activeIndex].list;
      },
      set(list) {
        this.otherList[this.activeIndex].list = list;
      },
    },
    pageNum: {
      get() {
        return this.pageNumList[this.activeIndex];
      },
      set(num) {
        this.$set(this.pageNumList, this.activeIndex, num);
      },
    },
    navHeight() {
      // #ifdef H5
      return this.$store.getters.navHeight;
      // #endif
      // #ifndef H5
      return this.$store.getters.navHeight * this.toRpx;
      // #endif
    },
  },
};
</script>

<style lang="scss">
.tab_live {
  background-color: #f7f7f7;
  padding-bottom: 20upx;

  .u-sticky {
    background-color: #f5f5f5;
  }

  .swiper_content {
    width: 690upx;
    height: 240upx;
    margin-top: 20upx;
    margin-left: 30upx;
  }

  .title_name {
    margin: 30upx 0;
    width: 100%;
    height: 50upx;
    font-size: 36upx;
    font-weight: bold;
    line-height: 50upx;
    color: #333333;
    padding: 0 30upx;
  }

  .content {
    width: 100%;
    padding: 0 30upx;

    .content_item {
      background-color: #fff;
      width: 690upx;
      height: 472upx;
      margin-bottom: 40upx;

      .item_image {
        position: relative;
        width: 690upx;
        height: 320upx;
        background: rgba(0, 0, 0, 0);
        border-radius: 20upx;
        overflow: hidden;

        .image_title {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 690upx;
          height: 60upx;
          background: #001020;
          opacity: 0.5;
          border-radius: 0px 0px 20upx 20upx;
          font-size: 30upx;
          font-weight: bold;
          color: #ffffff;
          display: flex;
          align-items: center;
          padding-left: 30upx;
        }
      }

      .item_text_warp {
        padding: 20upx;

        .item_title {
          height: 44upx;
          font-size: 32upx;
          font-weight: bold;
          line-height: 44upx;
          @include no-wrap();
        }

        .item_user {
          margin-top: 20upx;
          height: 50upx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .item_left {
            display: flex;
            align-items: center;

            .item_image_warp {
              width: 50upx;
              height: 50upx;
            }

            .item_user_teacher_name {
              margin-left: 14upx;
              height: 34upx;
              font-weight: 500;
              line-height: 34upx;
              color: #666666;
            }
          }

          .item_right {
            height: 44upx;
            font-size: 32upx;
            font-weight: bold;
            line-height: 44upx;
            color: #f34235;
          }
        }
      }
    }
  }

  .tab_warp {
    width: 100%;
    height: 65upx;
    margin-bottom: 40upx;
  }

  .content_warp {
    width: 100%;
  }

  .live_card_warp {
    padding: 0 30upx;
  }
}
</style>
